import { Activity, Stethoscope, Bandage, SquareCheckBig } from 'lucide-react';
import { Link } from 'react-router-dom';

export const Categories = () => {
  const categories = [
    {
      icon: <Activity size={32} className="text-[#5cb8b2]" />,
      title: 'Blood Pressure Monitors',
      description: 'Accurate devices to monitor your heart health at home',
      link: '/categories/blood-pressure-monitors'
    },
    {
      icon: <Stethoscope size={32} className="text-[#5cb8b2]" />,
      title: 'Nebulizers',
      description: 'Reliable respiratory therapy for all ages',
      link: '/categories/nebulizers'
    },
    {
      icon: <SquareCheckBig size={32} className="text-[#5cb8b2]" />,
      title: 'Mobility Aids',
      description: 'Support for independence and safe movement',
      link: '/categories/mobility-aids'
    },
    {
      icon: <Bandage size={32} className="text-[#5cb8b2]" />,
      title: 'First Aid Kits',
      description: 'Essential supplies for emergency preparedness',
      link: '/categories/first-aid'
    }
  ];
  return (
    <div className="bg-[#f5f7fa] py-16">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center">
          <h2 className="text-3xl font-bold text-[#0e4c92]">
            Popular Categories
          </h2>
          <p className="mt-4 text-lg text-gray-600 max-w-3xl mx-auto">
            Discover our most sought-after healthcare product guides
          </p>
        </div>
        <div className="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-4">
          {categories.map((category, index) => (
            <Link
              key={index}
              to={category.link}
              className="flex flex-col items-center p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 h-72"
            >
              <div className="p-3 bg-[#f5f7fa] rounded-full">
                {category.icon}
              </div>
              <h3 className="mt-5 text-xl font-semibold text-[#0e4c92] text-center min-h-[3.5rem] flex items-center">
                {category.title}
              </h3>
              <p className="mt-2 text-center text-gray-600 flex-1 flex items-center">
                {category.description}
              </p>
              <span className="mt-4 text-[#5cb8b2] font-medium">
                Browse Products →
              </span>
            </Link>
          ))}
        </div>
      </div>
    </div>
  );
};